<template>
  <div class="component-decorate-navbar">
    <nav
      class="site-navbar site-navbar--default"
    >
      <div
        class="site-navbar__header"
        :style="{ 'margin': '0 20px'}"
      >
        <div
          class="site-navbar__brand"
          style="width: auto;"
        >
          <img
            v-if="configuration.bsTopBarIcon"
            style="height: 18px;width:59px;margin-right: 10px;object-fit: contain;"
            :src="checkFileUrl(configuration.bsTopBarIcon)"
            alt=""
          >
          <a
            class="site-navbar__brand-lg"
            style="text-transform:none;"
            href="javascript:;"
          >{{ configuration.bsMenuTitleOpen }}</a>
          <a
            v-if="!configuration.bsTopBarIcon"
            class="site-navbar__brand-mini"
            style="text-transform:none;"
            href="javascript:;"
            :style="fontCloseSize"
          >{{ configuration.bsMenuTitleClose }}</a>
        </div>
      </div>
      <div
        class="site-navbar__content clearfix"
        @click="closeRight;visible = false"
      >
        <el-menu
          :ellipsis="false"
          class="site-navbar__menu site-navbar__menu--right"
          mode="horizontal"
          style="margin-right: 20px"
        >
          <el-menu-item
            class="site-navbar__avatar"
            index="4"
          >
            <div
              class="decorate-menu is-active"
              @click.stop="setMenu(4);handleSave();visible=false"
            >
              {{ $t('crud.saveBtn') }}
            </div>
          </el-menu-item>
        </el-menu>
        <el-menu
          v-show="isTemplate === '0'"
          :ellipsis="false"
          class="site-navbar__menu site-navbar__menu--right"
          mode="horizontal"
          style="margin-right: 20px"
        >
          <el-menu-item
            class="site-navbar__avatar"
            index="3"
          >
            <div
              class="decorate-menu is-active"
              @click.stop="setMenu(3); viewDialog = true;visible=false"
            >
              {{ $t('pcdecorate.decorateNavbar.setTemplate') }}
            </div>
          </el-menu-item>
        </el-menu>
        <el-menu
          :ellipsis="false"
          class="site-navbar__menu site-navbar__menu--right"
          mode="horizontal"
          style="margin-right: 20px"
        >
          <el-menu-item
            class="site-navbar__avatar"
            index="2"
          >
            <div
              class="decorate-menu is-active"
              @click.stop="setMenu(2);view();visible=false"
            >
              {{ $t('pcdecorate.decorateNavbar.preview') }}
            </div>
          </el-menu-item>
        </el-menu>
        <el-menu
          :ellipsis="false"
          class="site-navbar__menu site-navbar__menu--right"
          mode="horizontal"
          style="margin-right: 20px"
        >
          <el-menu-item
            class="site-navbar__avatar"
            index="1"
          >
            <div
              class="decorate-menu is-active"
              @click.stop="setMenu(1);handleClickComponent();visible=false"
            >
              {{ $t('pcdecorate.commonModal.component') }}
            </div>
          </el-menu-item>
        </el-menu>
        <div class="top-tip">
          {{ $t('pcdecorate.decorateNavbar.moveTip') }}
        </div>
      </div>
    </nav>

    <!-- 模板设置 -->
    <el-dialog
      v-model="viewDialog"
      :title="$t('pcdecorate.decorateNavbar.templateInfo')"
      width="30%"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        label-width="100px"
        style="margin: 30px 30px 0 10px"
        @submit.prevent
      >
        <el-form-item
          :label="$t('transport.name') + ':'"
          prop="name"
          :label-width="labelWidth"
        >
          <el-input
            v-model="dataForm.name"
            maxlength="20"
            @keyup.enter="onSubmit()"
          />
        </el-form-item>
        <el-form-item
          :label="$t('pcdecorate.decorateNavbar.templateRemark') + ':'"
          prop="remark"
          :label-width="labelWidth"
        >
          <el-input
            v-model="dataForm.remark"
            type="textarea"
            rows="5"
            :placeholder="$t('pcdecorate.decorateNavbar.templateTip')"
            maxlength="100"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          :label="$t('pcdecorate.decorateNavbar.templateImg') + ':'"
          prop="imgUrl"
          :label-width="labelWidth"
        >
          <div class="img-upload">
            <img-upload v-model="dataForm.imgUrl" />
            <el-button
              v-if="dataForm.imgUrl"
              type="primary"
              link
              class="default-btn text-btn"
              @click="delTagItemPic()"
            >
              {{ $t('text.delBtn') }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            class="primary-btn default-btn"
            @click="viewDialog = false"
          >{{ $t("order.cancel") }}</el-button>
          <el-button
            class="primary-btn default-btn"
            type="primary"
            @click="onSubmit()"
          >{{ $t("order.confirm") }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { formatConfigInfo } from '@/utils/website-config.js'

const props = defineProps({
  isTemplate: {
    type: String,
    default: '0'
  },
  dataFormL: {
    type: Object,
    default: () => {}
  }
})
const emit = defineEmits([
  'view',
  'handleSaveTemplate',
  'handleClickComponent',
  'handleSave',
  'closeRight'
])

const configuration = ref({
  bsLoginLogoImg: null,
  bsLoginBgImg: null,
  bsCopyrightCn: null,
  bsCopyrightEn: null,
  bsTitleContentCn: null,
  bsTitleContentEn: null,
  bsTitleImg: null,
  bsMenuTitleOpenCn: null,
  bsMenuTitleOpenEn: null,
  bsMenuTitleCloseCn: null,
  bsMenuTitleCloseEn: null
})
const visible = ref(false)

const validateName = (rule, value, callback) => {
  if (!value.trim()) {
    callback(new Error($t('pcdecorate.decorateNavbar.templateNameNotNull')))
  } else {
    callback()
  }
}
const dataRule = reactive({
  name: [
    { required: true, message: $t('pcdecorate.decorateNavbar.templateNameNotNull'), trigger: 'blur' },
    { validator: validateName, trigger: 'blur' }
  ]
})

const labelWidth = ref(localStorage.getItem('bbcLang') === 'en' ? '140px' : '100px')

const dataForm = ref(props.dataFormL)
watch(() => props.dataFormL, (val) => {
  dataForm.value = val
})

onMounted(() => {
  updateWebConfigData()
})

const delTagItemPic = () => {
  dataForm.value.imgUrl = ''
}
// 预览
const view = () => {
  emit('view')
}
// 模板保存
const dataFormRef = ref(null)
const viewDialog = ref(false)
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (!valid) {
      return
    }
    emit('handleSaveTemplate', dataForm.value)
    viewDialog.value = false
  })
}
// 菜单选择
const menuActive = ref(1)
const setMenu = (index) => {
  if (index !== menuActive.value) {
    menuActive.value = index
  } else {
    menuActive.value = -1
  }
}
// 组件管理
const handleClickComponent = () => {
  emit('handleClickComponent')
}
// 保存
const handleSave = () => {
  if (props.isTemplate === '0') {
    emit('handleSave', 2)
  } else {
    viewDialog.value = true
  }
}
// 关闭组件设置
const closeRight = () => {
  emit('closeRight')
}
// 更新网站配置信息
const fontCloseSize = reactive({
  fontSize: '18px'
})
const fontOpenSize = reactive({
  fontSize: '16px'
})

const webConfigStore = useWebConfigStore()
const updateWebConfigData = () => {
  http({
    url: http.adornUrl('/sys/webConfig/getActivity'),
    method: 'get'
  }).then(({ data }) => {
    data = formatConfigInfo(data)
    webConfigStore.addData(data)
    configuration.value = data
    if (data.bsMenuTitleOpen.length >= 17) {
      fontOpenSize.fontSize = '16px'
    }

    if (data.bsMenuTitleClose.length >= 6) {
      fontCloseSize.fontSize = '18px'
    }
  })
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
